<!--
*@Author: zt
*@Description: 预警详情
*@Date: 2024-08-27
-->
<template>
  <u-dialog
    v-bind="$attrs"
    @close="dialogClose"
    title="预警详情"
    :hideBtns="['submit']"
  >
    <a-layout class="f-h-100 s-bg-white">
      <a-layout-content style="overflow: hidden; padding: 0 15vw">
        <a-row>
          <a-col :span="24">
            <a-row justify="center">
              <div
                style="
                  color: #333333;
                  font-weight: 400;
                  font-size: 26px;
                  margin-bottom: 20px;
                "
              >
                {{ tForm.title }}
              </div>
            </a-row>
          </a-col>
          <a-col
            :span="24"
            style="margin-bottom: 2vh; color: #999999; font-weight: 400"
          >
            <a-row justify="space-between">
              <a-col :span="8">
                启动时间：{{
                  tForm.warnTime
                    ? dayjs(tForm.warnTime).format('YYYY-MM-DD')
                    : ''
                }}
              </a-col>
              <a-col :span="8">启用人：{{ tForm.userName }}</a-col>
              <a-col :span="8">
                预警等级：{{
                  tForm.warnLevel == '1'
                    ? 'I级应急响应'
                    : tForm.warnLevel == '2'
                    ? 'II级应急响应'
                    : tForm.warnLevel == '3'
                    ? 'III级应急响应'
                    : 'IV级应急响应'
                }}
              </a-col>
            </a-row>
          </a-col>
          <a-col :span="24">
            <div
              style="color: #666666; font-size: 18px; font-weight: 400"
              v-if="tForm.content"
            >
              {{ tForm.content }}
            </div>
            <!-- <a-textarea v-model:value="tForm.content" placeholder="暂无数据" :rows="30" :readonly="true"
              :bordered="false" /> -->
            <a-empty v-else />
          </a-col>
        </a-row>
      </a-layout-content>
      <a-layout-footer class="u-footer-group">
        <a-row class="f-padding-rl10">
          相关群聊：
          <div
            v-for="item in tForm.tgroupchatList || []"
            class="f-margin-r20"
            style="color: #1890ff; cursor: pointer"
            @click.stop="
              chatEventBus.emit('openGroup', { ...item, types: 1 })
            "
          >
            <u-icon-font type="icon-zaixiangoutong"></u-icon-font>
            {{ item['groupNames'] }}
          </div>
        </a-row>
      </a-layout-footer>
    </a-layout>
  </u-dialog>
</template>

<script lang="ts" setup>
import { ref, onMounted, watch, useAttrs, readonly } from 'vue';
import { storeToRefs } from 'pinia';
import { useLoginStore } from '@/store';
import { chatEventBus } from '@/util/eventBus'
import dayjs from 'dayjs';
import * as emergencyWarningApi from '@/service/emergencyWarning/index';

const { userInfo } = storeToRefs(useLoginStore());
const attrs = useAttrs();
const emits = defineEmits(['success', 'close']);

const dialogClose = () => {
  emits('close');
};
const tForm = ref<any>({
  title: '',
  warnTime: '',
  content: '',
  userName: userInfo.value.name,
});

// 请求数据
const getSearch = async () => {
  try {
    const res = await emergencyWarningApi.query(attrs.keyid);
    if (res.code == 0) {
      tForm.value = res.data.data;
    }
  } catch (error) {}
};

watch(
  () => attrs.open,
  (val, nav) => {
    if (val) {
      getSearch();
    }
  }
);
</script>

<style lang="scss" scoped>
.u-name-box {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  text-align: center;
  line-height: 80px;
  background: linear-gradient(348deg, #1890ff 0%, #dbedfe 100%);
  font-size: var(--font-size-level-1);
  color: #fff;
}

.u-span-name {
  font-weight: 400;
  font-size: var(--font-size-level-2);
  color: #1890ff;
}

.u-span-value {
  font-weight: 400;
  font-size: var(--font-size-level-1);
  color: #666666;
}
.u-footer-group {
  padding: 24px 0;
  border-top: 1px solid #ccc;
}
</style>
